<template>
  <div>
    <div class="app-content">
      <div class="operation">
        <el-button type="primary" class="ml-10" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delMenu">删除
        </el-button>
        <el-table :data="list" style="width: 100%" row-key="id" size="small" :tree-props="{ children: 'children' }" @selection-change="selectionChange">
          <el-table-column type="selection" min-width="40" />
          <el-table-column label="菜单名称" min-width="50" prop="menu_name" />
          <el-table-column label="菜单地址" min-width="60" prop="menu_weburl" />
          <el-table-column label="接口地址" min-width="60" prop="menu_apiurl" />
          <el-table-column label="菜单等级" min-width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.menu_level == 1">左侧一级菜单</span>
              <span v-if="scope.row.menu_level == 2">左侧二级菜单</span>
              <span v-if="scope.row.menu_level == 3">按钮、选择框</span>
            </template>
          </el-table-column>
          <el-table-column label="菜单图标" min-width="40" prop="menu_icon" />
          <el-table-column label="显示排序" min-width="40" prop="menu_sort" />
          <el-table-column label="是否记录日志" min-width="40">
            <template slot-scope="scope">
              <span v-if="scope.row.is_log == 0">否</span>
              <span v-if="scope.row.is_log == 1">是</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="50" prop="create_time" />
          <el-table-column label="操作" min-width="40">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="editValue(scope.row.id)">编辑</el-link>
              <el-link type="danger" :underline="false" @click="delValue(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增/编辑 -->
    <el-dialog :title="param.id?'编辑菜单':'新增菜单'" :visible.sync="dialogAdminVisible" width="650px">
      <el-form ref="form" :model="param" :rules="rules" label-width="150px" class="demo-ruleForm" :show-message="false">
        <el-form-item label="上级菜单">
          <Treeselect :props="defaultProps" :options="list" :value="param.parent_id" @getValue="getValue" />
        </el-form-item>
        <el-form-item label="菜单等级">
          <el-radio-group v-model="param.menu_level">
            <el-radio :label="1">左侧一级菜单</el-radio>
            <el-radio :label="2">左侧二级菜单</el-radio>
            <el-radio :label="3">按钮、选择框</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menu_name">
          <el-input v-model="param.menu_name" size="small" />
        </el-form-item>
        <el-form-item label="菜单地址">
          <el-input v-model="param.menu_weburl" size="small" />
        </el-form-item>
        <el-form-item label="地址接口">
          <el-input v-model="param.menu_apiurl" size="small" />
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input v-model="param.menu_icon" size="small" />
        </el-form-item>
        <el-form-item label="记录操作日志">
          <el-radio-group v-model="param.is_log">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单显示顺序">
          <el-input v-model="param.menu_sort" size="small" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAdminVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Menu } from '@/api/system/menu'
import Treeselect from '@/components/Treeselect'
import { deleteValue } from '@/utils/public'
export default {
  name: 'Menu',
  components: {
    Treeselect
  },
  data() {
    return {
      list: [],
      param: {},
      rules: {
        menu_name: { required: true, trigger: 'blur' }
      },
      defaultProps: {
        children: 'children',
        label: 'menu_name',
        value: 'id'
        // multiple: true
      },
      dialogAdminVisible: false,
      selectId: []
    }
  },
  created() {
    this.getMenu()
  },
  methods: {
    // 获取菜单
    getMenu() {
      Menu.listMenu().then((res) => {
        this.list = res.data
      }).catch(() => {})
    },
    // 新增
    add() {
      this.param = {
        menu_level: 3,
        is_log: 1
      }
      this.dialogAdminVisible = true
    },
    getValue(val) {
      this.param.parent_id = val
    },
    // 编辑
    editValue(id) {
      Menu.getMenu({ id }).then((res) => {
        this.param = res.data
        this.dialogAdminVisible = true
      }).catch(() => {})
    },
    // 选择
    selectionChange(selection) {
      this.selectId = selection.map(val => val.id)
    },
    // 删除
    delMenu() {
      if (!this.selectId.length) {
        this.$message.error('请先选择要删除的数据,在进行操作！')
        return false
      }
      this.delValue(this.selectId.join(','))
    },
    delValue(id) {
      deleteValue({
        _this: this,
        success: (res) => {
          Menu.delMenu({ id }).then((res) => {
            this.$message.success('删除成功')
            this.getMenu()
          }).catch(() => {})
        }
      })
    },
    // 确定
    determine() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          Menu.addMen({ data: [this.param] }).then((res) => {
            this.dialogAdminVisible = false
            this.getMenu()
            this.$store.dispatch('permission/GenerateRoutes').then(() => {}).catch(() => {})
          }).catch(() => {})
        }
      })
    }
  }
}
</script>

